import React, { memo, useEffect, useRef } from 'react';

import sty from './sty.module.css';
import cs from 'classnames';
import { shallowEqual, useSelector } from 'react-redux';
const LyricContent = () => {
  const { lyrList, curLyrIdx } = useSelector(state => ({
    lyrList: state.getIn(['player', 'lyrList']),
    curLyrIdx: state.getIn(['player', 'curLyrIdx'])
  }), shallowEqual)

  const lyricRef = useRef(null)
  useEffect(() => {
    if (curLyrIdx < 3) {
      return
    }
    console.log(curLyrIdx);
    screntTop((curLyrIdx - 3) * 32)

  }, [curLyrIdx])

  const screntTop = (top) => {
    console.log('top', top);
    lyricRef.current.scroll({
      behavior: 'smooth',
      top: top
    })
  }
  return <div className={sty.root} ref={lyricRef}>
    <div className={sty.lyricContent}>
      {
        !!lyrList.length && lyrList.map((v, i) => {
          return (
            <div
              key={i}
              className={cs(sty.lyricItem, {
                'lyrAct': curLyrIdx === i
              })}>
              {
                v.content
              }
            </div>
          )
        })
      }
    </div>
  </div>
}
export default memo(LyricContent)